<template>
  <div class="shop-data">
    <div class="top-box">
      <div class="nav-bar">
        <div class="nav-left">
          <i
            class="iconfont icon-zuojiantou"
            @click="$router.push('/find')"
          ></i>
        </div>
        <div class="nav-title">市场数据</div>
      </div>

      <!-- 下拉选择 -->
      <div class="select">
        <van-dropdown-menu class="menu">
          <!-- 城市选择 -->
          <van-dropdown-item
            @click="showDropdown = true"
            class="item"
            :title="city"
          >
            <van-search
              v-model="value1"
              class="search"
              shape="round"
              placeholder="请输入搜索关键词"
            />
            <van-index-bar style="text-align: left">
              <template v-for="(value, key) in citys">
                <van-index-anchor
                  style="background-color: #eee"
                  :index="key"
                  :key="key"
                />
                <van-cell
                  @click="getCity(item[0], item[1])"
                  :title="item[0]"
                  v-for="(item, index) in value"
                  :key="index"
                />
              </template>
            </van-index-bar>
          </van-dropdown-item>

          <!-- 职位选择 -->
          <van-dropdown-item class="item" :title="job">
            <van-search
              v-model="value2"
              class="search"
              shape="round"
              placeholder="请输入搜索关键词"
            />
            <van-cell
              class="job-box"
              v-for="(value, key) in joblist"
              @click="clickjob(value)"
              :key="key"
              :title="value"
            />
          </van-dropdown-item>
        </van-dropdown-menu>
      </div>
    </div>

    <!-- 工资收入 -->
    <div class="salary">
      <div class="title">工资收入</div>
      <div class="data">
        <span>区间</span>
        <span>占比</span>
      </div>
      <div class="dart">
        <div ref="chart1" class="chart-box" style="height: 200px"></div>
      </div>
      <div class="aver">
        <p>平均</p>
        <p>￥17610</p>
      </div>
      <div class="total">
        <span>近1年 18057份样本/可信度：高</span>
      </div>
    </div>

    <!-- 工作经验 -->
    <div class="exp">
      <div class="title">工作经验</div>
      <div class="dart">
        <div ref="chart2" class="chart-box" style="height: 260px"></div>
      </div>
    </div>

    <!-- 历年平均工资变化趋势 -->
    <div class="exp">
      <div class="title">历年平均工资变化趋势</div>
      <div class="dart">
        <div ref="chart3" class="chart-box" style="height: 260px"></div>
      </div>
    </div>

    <!-- 就业形势 -->
    <div class="exp">
      <div class="title">就业形势</div>
      <div class="dart">
        <div ref="chart4" class="chart-box" style="height: 260px"></div>
      </div>

      <span class="axis">相关职位表</span>
      <div class="kown">
        <p><van-icon name="warning-o" />说明</p>
        曲线越向上代表市场需求量越大，就业情况越好。反之，代表该类职位需求量较少。该数据由各地招聘网站统计而来，可能因抓取系统稳定性等因素而致使数据偏离客观实情，仅供参考。
      </div>
    </div>
  </div>
</template>

<script>
import { cityIndex } from '@/api/skill'
// 导入echarts
import * as echarts from 'echarts'
export default {
  mounted () {
    const myChart1 = echarts.init(this.$refs.chart1)
    myChart1.setOption({
      tooltip: {
        // trigger: 'item'
      },
      legend: {
        right: 'right',
        top: 'center'
      },
      series: [
        {
          type: 'pie',
          radius: ['50%', '15%'],
          avoidLabelOverlap: false,
          // top: '50%',
          right: '50%',
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '40',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 81, name: '2k-4.5k:                8.1%' },
            { value: 596, name: '4.5k-8k                59.6%' },
            { value: 152, name: '8k-10k                 15.2%' },
            { value: 135, name: '10k-15k                13.5%' },
            { value: 28, name: '15k-20k                2.8%' }
          ]
        }
      ]
    })

    const myChart2 = echarts.init(this.$refs.chart2)
    myChart2.setOption({
      xAxis: {
        axisTick: {
          alignWithLabel: true
        },
        axisLabel: {
          interval: 0,
          textStyle: {
            fontSize: '10'
          }
        },
        size: 12,
        type: 'category',
        data: [
          '应届生工资',
          '1-3年工资',
          '3-5年工资',
          '5-10年工资',
          '10年以上工资'
        ]
      },
      yAxis: {
        type: 'value',
        min: 5000,
        axisLabel: {
          padding: [0, -5, 0, 0],
          textStyle: {
            fontSize: '10'
          }
        }
      },
      series: [
        {
          data: [6000, 6500, 9000, 9500, 10000],
          type: 'line',
          areaStyle: { color: '#e5f8fb' },
          lineStyle: { color: '#03b9d4' },
          color: '#03b9d4',
          symbolSize: 5
        }
      ]
    })

    const myChart3 = echarts.init(this.$refs.chart3)
    myChart3.setOption({
      xAxis: {
        axisTick: {
          alignWithLabel: true
        },
        axisLabel: {
          interval: 0,
          textStyle: {
            fontSize: '10'
          }
        },
        size: 12,
        type: 'category',
        data: ['2014', '2015', '2016', '2017', '2018', '2019', '2020']
      },
      yAxis: {
        type: 'value',
        min: 4000,
        axisLabel: {
          padding: [0, -5, 0, 0],
          textStyle: {
            fontSize: '10'
          }
        }
      },
      series: [
        {
          data: [4000, 5100, 5500, 5600, 6700, 7500, 7000],
          type: 'line',
          areaStyle: { color: '#e5f8fb' },
          lineStyle: { color: '#03b9d4' },
          color: '#03b9d4',
          symbolSize: 5
        }
      ]
    })

    const myChart4 = echarts.init(this.$refs.chart4)
    myChart4.setOption({
      xAxis: {
        axisTick: {
          alignWithLabel: true
        },
        axisLabel: {
          interval: 0,
          textStyle: {
            fontSize: '10'
          },
          rotate: 90
        },
        size: 12,
        type: 'category',
        data: [
          '2010',
          '2011',
          '2012',
          '2013',
          '2014',
          '2015',
          '2016',
          '2017',
          '2018',
          '2019',
          '2020'
        ]
      },
      yAxis: {
        show: false,
        type: 'value',
        min: 5000,
        axisLabel: {
          padding: [0, -5, 0, 0],
          textStyle: {
            fontSize: '10'
          }
        }
      },
      series: [
        {
          data: [
            6000, 8000, 8200, 9000, 8300, 7000, 6200, 7500, 7000, 6000, 8800
          ],
          type: 'line',
          areaStyle: { color: '#e5f8fb' },
          lineStyle: { color: '#03b9d4' },
          color: '#03b9d4',
          symbolSize: 5,
          smooth: true
        }
      ]
    })
  },
  data () {
    return {
      citys: {},
      city: '北京',
      job: '电商运营专员',
      showDropdown: false,
      joblist: [],
      value1: '',
      value2: ''
    }
  },
  created () {
    this.loadCityIndex()
  },
  methods: {
    clickjob (value) {
      this.job = value
    },
    choosecity (val) {
      console.log('dianjil', val)
    },
    getCity (item, list) {
      this.city = item
      this.joblist = list
      console.log('list', this.joblist)
      this.showDropdown = false
    },
    async loadCityIndex () {
      const res = await cityIndex()
      this.citys = res.data
      console.log(res)
      console.log(this.citys)
    }
  }
}
</script>

<style lang="less" scoped>
::v-deep .van-dropdown-menu__bar {
  box-shadow: none;
}
::v-deep .van-dropdown-menu__item {
  margin-right: 70px;
  margin-left: -80px;
}
::v-deep .van-ellipsis {
  width: 200px;
  text-align: right;
}
.shop-data {
  .top-box {
    padding-bottom: 10px;
    padding-top: 5px;
    .nav-bar {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      height: 40px;
      line-height: 1.5;
      text-align: center;
      background-color: #fff;
      .nav-left {
        position: absolute;
        top: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        padding: 0 10px;
        .iconfont {
          font-size: 25px;
        }
      }
      .nav-title {
        margin: 0 auto;
        font-size: 18px;
      }
    }
    .select {
      border-bottom: 2px solid #fafafa;
      .menu {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        .item {
          .search {
            background-color: #eee;
            width: 98%;
          }
          .job-box {
            text-align: left;
            border-bottom: 1px solid #fefefe;
            margin: 5px 5px;
            padding: 5px 5px;
          }
        }
      }
    }
  }
  .salary {
    position: relative;
    padding: 10px 15px;
    // margin-bottom: 20px;
    .title {
      text-align: left;
      font-size: 17px;
      font-weight: 500;
    }
    .data {
      font-size: 13px;
      color: #c6c6cd;
      border-bottom: 1px solid #c6c6cd;
      width: 43%;
      padding: 5px;
      display: flex;
      justify-content: space-between;
      position: absolute;
      right: 20px;
    }
    .total {
      font-size: 13px;
      color: #c6c6cd;
      margin-top: 0;
    }
    .aver {
      font-size: 13px;
      color: #000;
      position: absolute;
      top: 45%;
      left: 20%;
      p {
        display: block;
        margin: 0;
      }
    }
  }
  .exp {
    padding: 10px 15px;
    position: relative;
    .title {
      text-align: left;
      font-size: 17px;
      font-weight: 500;
    }
    .dart {
      .chart-box {
        margin-left: 10px;
      }
    }
    .kown {
      margin-top: -40px;
      margin-bottom: 10px;
      font-size: 12px;
      color: #545671;
      text-align: left;
      p {
        margin-bottom: 8px;
      }
    }
    .axis {
      position: absolute;
      font-size: 14px;
      transform: rotate(-90deg);
      left: 5px;
      bottom: 220px;
      color: #545671;
    }
  }
}
</style>
